import * as echarts from 'echarts';

class initChart{
  constructor(){
    this.app = {};
    this.myChart
    this.option;
    this._legendData = []
    this._xAxisData = []
    this._series = []
    this.bkColor = ['#73c0de', '#91cc75', '#fac858', '#ee6666','#73c0de', '#91cc75', '#fac858', '#ee6666' ]

    this.posList = [
      'left',
      'right',
      'top',
      'bottom',
      'inside',
      'insideTop',
      'insideLeft',
      'insideRight',
      'insideBottom',
      'insideTopLeft',
      'insideTopRight',
      'insideBottomLeft',
      'insideBottomRight'
    ];
    this.app.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: 'left',
          center: 'center',
          right: 'right'
        }
      },
      verticalAlign: {
        options: {
          top: 'top',
          middle: 'middle',
          bottom: 'bottom'
        }
      },
      position: {
        options: this.posList.reduce(function (map, pos) {
          map[pos] = pos;
          return map;
        }, {})
      },
      distance: {
        min: 0,
        max: 100
      }
    };
    this.app.config = {
      rotate: 90,
      align: 'left',
      verticalAlign: 'middle',
      position: 'insideBottom',
      distance: 15,
      onChange: function () {
        const labelOption = {
          rotate: this.app.config.rotate,
          align: this.app.config.align,
          verticalAlign: this.app.config.verticalAlign,
          position: this.app.config.position,
          distance: this.app.config.distance
        };
        this.myChart.setOption({
          series: [{
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            }
          ]
        });
      }
    };
    this.labelOption = {
      show: true,
      position: this.app.config.position,
      distance: this.app.config.distance,
      align: this.app.config.align,
      verticalAlign: this.app.config.verticalAlign,
      rotate: this.app.config.rotate,
      formatter: '{c}',
      fontSize: 16,
      rich: {
        name: {}
      }
    };

    // 判断初始化时的宽度
  }

  createOption(){
    this.option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      dataZoom: [
        {
          type: "slider",//inside鼠标缩放
          show: true,
          start: 0,
          end: 100,
          dataZoomSelectActive: false,
          xAxisIndex: [0],
        }
      ],
      legend: {
        // data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        data: this._legendData
      },
      xAxis: [{
        type: 'category',
        axisTick: {
          show: false
        },
        // data: ['2012', '2013', '2014', '2015', '2016']
        data: this._xAxisData
      }],
      yAxis: [{
        type: 'value'
      }],
      series: this._series
    };
  }

  init(chartDom) {
    this.myChart = echarts.init(chartDom);
    this.myChart.showLoading({
      text: 'loading',
    });
  }

  setOption(legendData, xAxisData, series){
    this._legendData = [], this._xAxisData = [],this._series = [];
    this._legendData = legendData 
    this._xAxisData = xAxisData
    for(let idx in series){
      this._series.push({
        ...series[idx],
        type: 'bar',
        barGap: 0,
        label: this.labelOption,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            //这里是颜色
            color: this.bkColor[idx]
          }
        }
      })
    }
    this.createOption()
    // console.log(this._legendData,this._xAxisData,this._series,this.option)
    this.option && this.myChart.setOption(this.option);
    this.myChart.hideLoading()
  }
}

export default initChart